User Interface : Creating an Animated Splash Screen

1. Problem

Your application starts connecting to a web page, and you need to show a splash screen with an animated progress bar in order to inform users that they need to wait a few seconds before using the application.

2. Solution

You can create a user control and use it with the Child property provided by the Popup class. The ProgressBar control has the IsIndeterminate property set to true.

3. How It Works

The splash screen provided by the Visual Studio 2010 Windows Phone 7 Silverlight Application project template is static, a simple PNG image shown during the application launch. To create an animated splash screen, you need to remove the SplashScreen.png file from the project and use a trick: the Popup class.

Usually, the Popup class is used to show tooltips during mouse activities in desktop applications. However, with a Windows Phone 7 application, you can use it to show a generic UIElement object, perhaps either a common control or a user control. User controls are often used when you need to compose more than one common control within a unique control having its own logic. Instead of using dozens of controls to create a complex user interface, you can separate functionality into user controls and thereby achieve code reusability too.

In this case, you are going to create a user control composed of a full-screen image—480×800 pixels—some text, and a progress bar. The Popup class provides the Child property used to specify the UIElement that has to be shown. In this case, the Child property will be set to the MySplashScreen object defined by the user control.

The ProgressBar control within the user control has the IsIndeterminate property set to true because the loading time of the web page cannot be estimated. Indeed, when your application starts, you make a call to a web page, and because you don't know whether the phone is connected to Wi-Fi or to General Packet Radio Service (GPRS), or whether some network traffic delays might occur, you cannot estimate the loading time.

When the application is launched, the pop-up will fill the entire screen surface, and the progress bar will display across the screen. Behind the scenes, the WebBrowser control  will load the page and then raise the Navigated event. Trapping the Navigated event will allow you to hide the pop-up and show the user interface that is underneath.

4. The Code

To demonstrate the animated splash screen example, you are going to create a FlickrPhotoAlbum application. This application uses the Flickr.NET library (see http://flickrnet.codeplex.com) and the phone camera to take a picture and upload it to a Flickr gallery.

Before uploading Flickr.NET API calls to the destination, users have to be authenticated to Flickr and have to accept that your application will use their resources.

Our application accomplishes these steps by redirecting the WebControl content to an URL page returned by the AuthCalcUrl method call. In this case, the animated splash screen is really useful in enabling you to avoid having the user interface show blank WebControl content until the page is loaded. Indeed, by using the Navigated event handler, you know exactly when the page has finished loading and can hide the splash screen. Let's examine the code from the FlickrPhotoAlbum application.

In the MySplashScreen.xaml file, you defined the user control's user interface. It is composed of a full-screen image, a TextBlock control showing the Loading text, and a ProgressBar:

<UserControl x:Class="FlickrPhotoAlbum.MySplashScreen"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="800" d:DesignWidth="480">

    <Grid x:Name="LayoutRoot" Background="White" Width="480" Height="800">
        <ProgressBar HorizontalAlignment="Left" Margin="47,692,0,89" Name="pbProgress"
         Width="383"  />
        <Image Height="512" HorizontalAlignment="Left" Margin="114,75,0,0" Name="imgScreen"
         Stretch="Fill" VerticalAlignment="Top" Width="272" Source="images/screen.jpg" />
        <TextBlock HorizontalAlignment="Left" Margin="185,656,0,114" Text="Loading..."
         Width="111" Foreground="Black" FontSize="22" />
    </Grid>
</UserControl>

					  

The IsIndeterminate property value is set to true in the MySplashScreen constructor:

namespace FlickrPhotoAlbum
{
    public partial class MySplashScreen : UserControl
    {
        public MySplashScreen()
        {
            InitializeComponent();
            this.pbProgress.IsIndeterminate = true;
        }
    }
}

In the MainPage.xaml.cs file, you define the MainPage class constructor in which the Popup object is created, its Child property is set to an object of the MySplashScreen class, and the IsOpen property is set to true, causing the splash screen to be shown:

public partial class MainPage : PhoneApplicationPage
    {
        Popup popup = null;

        // Constructor
        public MainPage()
        {
            InitializeComponent();

. . .

            popup = new Popup();
            popup.Child = new MySplashScreen();
            popup.IsOpen = true;
        }

The IsOpen property is set to false in the Navigated event handler that is raised by the WebBrowser control after having completely loaded the web page:

private void wbBrowser_Navigated(object sender,
                                         System.Windows.Navigation.NavigationEventArgs e)
        {
            this.popup.IsOpen = false;
        }

					  

The instruction to trap the Navigated event is declared in the phone:WebBrowser XAML tag by using the Navigated attribute:

<phone:WebBrowser x:Name="wbBrowser" Grid.Row="0" Navigated="wbBrowser_Navigated"/>

					  

5. Usage

In Visual Studio 2010, select Windows Phone 7 Emulator as the target output and press Ctrl+F5. The emulator displays the animated splash screen, as shown in Figure 1.

Figure 1. The animated splash screen in action

The splash screen automatically disappears when the web page is loaded, showing the user interface beneath (see Figure 2).

Figure 2. The splash screen is automatically hidden, and the application is ready to authenticate the user on Flickr.